import './dlg-font.css';
import {Dialog} from '../dlg/dlg.js'

export class FontDialog extends Dialog{
  constructor(){
    super();
      this.#init(); 
      this.#$fontFList.onclick = this.#clickFont.bind(this);
      this.#$fontSList.onclick = this.#clickFontS.bind(this);
      this.#$fontSZList.onclick = this.#clickFontSZ.bind(this);
      this.#$lanName.onchange = this.#clickLan.bind(this);
      this.#$btnSure.onclick = this.#clickbtnSure.bind(this);    
      this.#$btnCancel.onclick = this.#clickbtnCancel.bind(this);    
    }
  #init(){
    this.$ = this.querySelector;
    this.decorate(this.#html, "字体");
    this.#$fontSet = this.$('.fontSet');
    this.#$fontFInput = this.$('.fontFInput')
    this.#$fontFList = this.$('.fontFList')
    this.#$fontSInput = this.$('.fontSInput')
    this.#$fontSList = this.$('.fontSList')
    this.#$fontSZInput = this.$('.fontSZInput')
    this.#$fontSZList = this.$('.fontSZList')
    this.#$expSpan = this.$('.expSpan')
    this.#$lanName = this.$('.lanName')
    this.#$btnSure = this.$('.btnSure')
    this.#$btnCancel = this.$('.btnCancel')
}
#clickFont(){
   var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target.nodeName === "LI") {
            switch (target.className) {
                case 'fontF1':
                    console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;  
                    this.#$fontFInput.setAttribute("style","font-family:'Courier New';")
                    this.#$expSpan.setAttribute("style","font-family:'SimSun';")
                    this.#fontFly = 'font-family:"Courier New";'
                    break;
                case 'fontF2':
                     console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;               
                    this.#$fontFInput.setAttribute("style","font-family:'LiSu';") 
                    this.#$expSpan.setAttribute("style",'font-family:"LiSu";') 
                    this.#fontFly = 'font-family:"LiSu"';
                    break;
                case 'fontF3':
                    console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;               
                    this.#$fontFInput.setAttribute("style","font-family:'Microsoft Yahei';")     
                    this.#$expSpan.setAttribute("style",'font-family:"Microsoft Yahei"') 
                    this.#fontFly = 'font-family:"Microsoft Yahei";'
                    break;
                case 'fontF4':
                    console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;               
                    this.#$fontFInput.setAttribute("style","font-family:'FangSong'")  
                    this.#$expSpan.setAttribute("style",'font-family:"FangSong"')
                    this.#fontFly = 'font-family:"FangSong";'
                    break;
                case 'fontF5':
                    console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;               
                    this.#$fontFInput.setAttribute("style","font-family:'KaiTi'")  
                    this.#$expSpan.setAttribute("style",'font-family:"KaiTi"')
                    this.#fontFly = 'font-family:"KaiTi";'
                    break;
                case 'fontF6':
                    console.log(target.innerText)
                    this.#$fontFInput.value = target.innerText;              
                    this.#$fontFInput.setAttribute("style","font-family:'STXinwei'")  
                    this.#$expSpan.setAttribute("style",'font-family:"STXinwei"')
                    this.#fontFly = 'font-family:"STXinwei";'
                    break;
            }
        }
}
#clickFontS(){
   var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target.nodeName === "LI") {
            switch (target.className) {
                case 'fontS1':
                    console.log(target.innerText)
                    this.#$fontSInput.value = target.innerText;  
                    this.#$fontSInput.setAttribute("style",'font-weight:normal')
                    this.#$fontSInput.setAttribute("style",'font-style:normal')
                    this.#$expSpan.setAttribute("style",'font-weight:normal')
                    this.#$expSpan.setAttribute("style",'font-style:normal') 
                    this.#fontShape = 'font-weight:normal;font-style:normal';
                    break;
                case 'fontS2':
                     console.log(target.innerText)
                    this.#$fontSInput.value = target.innerText;               
                    this.#$fontSInput.setAttribute("style",'font-weight:normal') 
                    this.#$fontSInput.setAttribute("style",'font-style:italic') 
                    this.#$expSpan.setAttribute("style",'font-weight:normal')
                    this.#$expSpan.setAttribute("style",'font-style:italic')  
                    this.#fontShape = 'font-weight:normal;font-style:italic';
                    break;
                case 'fontS3':
                    console.log(target.innerText)
                    this.#$fontSInput.value = target.innerText;               
                    this.#$fontSInput.setAttribute("style",'font-weight:bold')  
                    this.#$fontSInput.setAttribute("style",'font-style:normal')  
                    this.#$expSpan.setAttribute("style",'font-weight:bold')
                    this.#$expSpan.setAttribute("style",'font-style:normal')
                    this.#fontShape = 'font-weight:bold;font-style:normal';
                    break;
                case 'fontS4':
                    console.log(target.innerText)
                    this.#$fontSInput.value = target.innerText;               
                    this.#$fontSInput.setAttribute("style",'font-weight:bold')  
                    this.#$fontSInput.setAttribute("style",'font-style:italic') 
                    this.#$expSpan.setAttribute("style",'font-weight:bold') 
                    this.#$expSpan.setAttribute("style",'font-style:italic')
                    this.#fontShape = 'font-weight:bold;font-style:italic';
                    break;              
                  }
        }
}
#clickFontSZ(){
   var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target.nodeName === "LI") {
            switch (target.className) {
                case 'fontSZ1':
                    this.#$fontSZInput.value = target.innerText;               
                    console.log(target.innerText)
                    this.#$expSpan.setAttribute("style",'font-size:16px')
                    this.#fontSz = 'font-size:16px;'
                    break;
                case 'fontSZ2':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:18px')
                      this.#fontSz = 'font-size:18px;'
                    break;
                case 'fontSZ3':
                    console.log(target.innerText)    
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:20px')
                    this.#fontSz = 'font-size:20px;'
                    break;
                case 'fontSZ4':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:22px')
                    this.#fontSz = 'font-size:22px;'
                    break;
                case 'fontSZ5':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:24px')
                    this.#fontSz = 'font-size:24px;'
                    break; 
                case 'fontSZ6':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:26px')
                    this.#fontSz = 'font-size:26px;'
                    break;
                case 'fontSZ7':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:28px')
                    this.#fontSz = 'font-size:28px;'
                    break;
                case 'fontSZ8':
                    console.log(target.innerText)
                    this.#$fontSZInput.value = target.innerText;               
                    this.#$expSpan.setAttribute("style",'font-size:30px')
                    this.#fontSz = 'font-size:30px;'
                    break;             
                }
        }
}
#clickbtnSure(){
  document.querySelector('.content').setAttribute("style",this.#fontFly,this.#fontShape,this.#fontSz)
    this.remove();
}
#clickbtnCancel(){
  this.remove();
}
#clickLan(){
  if(this.#$lanName.value == "中文GB2312"){
    this.#$expSpan.innerText = "测试样本";
  }else{
    this.#$expSpan.innerHTML = "AaBbYyZz"
  }
}
  #$titlebar = null;
  #$main = null;
  #$fontSet = null;
  #$fontFInput = null;
  #$fontFList = null;
  #$fontSInput = null;
  #$fontSList = null;
  #$fontSZInput = null;
  #$fontSZList = null;
  #$expSpan = null;
  #$btnSure = null;
  #$btnCancel = null;
  #$lanName = null;
  #fontFly = null;
  #fontShape = null;
  #fontSz = null;
  #html = ''
  +'<div class="fontMain">'
  +'<div class="fontSet">'
    +'<div class="fontF">'
      +'<span>字体(F)</span>'
      +'<br>'
      +'<input type="text" list="fontList" width:100px; class="fontFInput" placeholder="宋体">'
        +'<ul class="fontFList">'
          +'<li class="fontF1">宋体</li>'
          +'<li class="fontF2">隶书</li>'
          +'<li class="fontF3">微软雅黑</li>'
          +'<li class="fontF4">仿宋</li>'
          +'<li class="fontF5">楷体</li>'
          +'<li class="fontF6">华文新魏</li>'
        +'</ul>'
    +'</div>'
    +'<div class="fontS">'
       +'<span>字形(Y)</span>'
       +'<br>'
       +'<input type="text" list="fontList" class="fontSInput" placeholder="常规">'
         +'<ul class="fontSList">'
           +'<li class="fontS1">常规</li>'
           +'<li class="fontS2">斜体</li>'
           +'<li class="fontS3">粗体</li>'
           +'<li class="fontS4">粗斜体</li>'
         +'</ul>'
    +'</div>'
    +'<div class="fontSZ">'
       +'<span>大小(S)</span>'
       +'<br>'
       +'<input type="text" list="fontList" class="fontSZInput" placeholder="15">'
         +'<ul class="fontSZList">'
           +'<li class="fontSZ1">16</li>'
           +'<li class="fontSZ2">18</li>'
           +'<li class="fontSZ3">20</li>'
           +'<li class="fontSZ4">22</li>'
           +'<li class="fontSZ5">24</li>'
           +'<li class="fontSZ6">26</li>'
           +'<li class="fontSZ7">28</li>'
           +'<li class="fontSZ8">30</li>'
         +'</ul>'
      +'</div>'
    +'</div>'
    +'<p>示例</p>'
    +'<div class="exp">'
      +'<span class="expSpan">AaBbYyZz</span>'
    +'</div>'
    +'<p>脚本(R)</p>'
    +'<div class="language">'
      +'<input type="text" list="itemlist" class="lanName">'
      +'<datalist id="itemlist">' 
        +'<option>中文GB2312</option>'
        +'<option>西欧语言</option>'
        +'</datalist>'
      +'</input>'
    +'</div>'
    +'<div class="btns">'
        +'<button class="btnSure">确定</button>'
        +'<button class="btnCancel">取消</button>'
      +'</div>'
  +'</div>'
  ;
}
  
